<template>
  <div class="app-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane name="settle" label="期末处理" style="padding: 40px;">
        <el-steps :active="curStep">
          <el-step title="当前月份" icon="el-icon-s-home" />
          <el-step title="结转损益" icon="el-icon-s-shop" />
          <el-step title="结账" icon="el-icon-s-check" />
        </el-steps>
        <div v-if="curStep == 1" style="padding-left: 2%;">
          <el-tag>{{ curMonth }}</el-tag>
          <div>
            <el-button :loading="loading" type="primary" @click="goStep(1)">下一步</el-button>
          </div>
        </div>
        <div v-else-if="curStep == 2" style="padding-left: 40%;">
          <div v-if="addVoucher">
            <el-button :loading="loading" type="primary" @click="toAddVoucher()">上一步</el-button>
          </div>
          <el-tag >无需结转损益</el-tag>
          <div>
            <el-button :loading="loading" type="primary" @click="goStep(-1)">上一步</el-button>
            <el-button :loading="loading" type="primary" style="padding-left: 10px;" @click="goStep(1)">下一步</el-button>
          </div>
        </div>
        <div v-else-if="curStep == 3" style="padding-left: 60%;">
          <div>1.断号检查<el-tag>已完成</el-tag><el-button v-permission="['SYS_ADMIN','COMMON_ADMIN','FIN_VOUCHER_MONTH']" :loading="loading" type="success" style="padding-left: 10px;" @click="doVoucherSeriesNo">连号处理</el-button></div>
          <div>2.资金检查<el-tag>此处只提示,不做处理</el-tag><el-button v-if="accountCheckFlag" style="padding-left: 10px;" @click="goAccountView()">点击查看</el-button></div>
          <div>
            <el-button :loading="loading" type="primary" @click="goStep(-1)">上一步</el-button>
            <el-button v-permission="['SYS_ADMIN','COMMON_ADMIN','FIN_VOUCHER_MONTH']" :loading="loading" type="success" style="padding-left: 10px;" @click="doMonthSettle">确认结帐</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="unsettle" label="反结账" style="padding: 40px;">
        <el-tag color="#ee9900">{{ prevMonth }}</el-tag>
        <div>
          <el-button v-permission="['SYS_ADMIN','COMMON_ADMIN','FIN_VOUCHER_MONTH']" :loading="loading" type="primary" @click="doMonthUnsettle">确认反结账</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
    <eForm ref="form" :sup_this="sup_this" />
    <CustomDialog :drag-dialog="dialogInfo" style="z-index:1201;">
      <settle-account-balance-detail ref="settleAccountBalanceDetail" :details="settleAccountBalanceDetails" />
    </CustomDialog>
  </div>
</template>

<script>
import { getCurCpyInfo } from '@/api/system/cpy'
import finVoucher from '@/api/fin/FinVoucher'
import eForm from './module/form'
import settleAccountBalanceDetail from './module/settleAccountBalanceDetail'

export default {
  components: { eForm, settleAccountBalanceDetail },
  mixins: [],
  props: {
  },
  data() {
    return {
      loading: false,
      activeTab: 'settle',
      delLoading: false,
      sup_this: this,
      addVoucher: false,
      accountCheckFlag: false,
      curMonth: '2022-01',
      prevMonth: '2021-12',
      curStep: 1,
      settleAccountBalanceDetails: [],
      dialogInfo: {
        name: 'finVoucherSettleAccountMngDialog',
        title: '资金总账查看',
        fullScreen: false,
        width: 80,
        height: 90
      }
    }
  },
  created() {
    // 1. 获取月份
    getCurCpyInfo().then(res => {
      this.curMonth = res.data.busMainData.finMonth
      this.prevMonth = res.data.busMainData.prevMonth
    })
  },
  mounted() {
  },
  methods: {
    displayAccountDialog() {
      const { name } = this.dialogInfo
      this.$nextTick(() => {
        this.$modal.show(name)
      })
    },
    hiddenAccountDialog() {
      const { name } = this.dialogInfo
      this.$nextTick(() => {
        this.$modal.hide(name)
      })
    },
    goStep(num) {
      this.curStep = this.curStep + num
      if (this.curStep === 2) {
        // 2. 是否增加 voucher shengyi 结转
        this.toAddVoucher()
      } else if (this.curStep === 3) {
        this.accountCheckFlag = false
        finVoucher.getAccountBalanceInfo(this.curMonth).then(res => {
          if (res.data.length > 0) {
            this.accountCheckFlag = true
          }
        })
      }
    },
    toAddVoucher() {
      this.addVoucher = false
      const _thisForm = this.$refs.form
      finVoucher.doLossSettleMonthProcess(this.curMonth).then(res => {
        if (res.data.voucherDetails.length > 0) {
          this.addVoucher = true
          _thisForm.initDataOfBefore()
          _thisForm.addDataFromSettleMonth(res.data)
        }
      })
    },
    doVoucherSeriesNo() {
      finVoucher.doVoucherSeriesNo(this.curMonth).then(res => {
      })
    },
    goAccountView() {
      // 显示列表
      finVoucher.getAccountBalanceInfo(this.curMonth).then(res => {
        if (res.data.length > 0) {
          this.accountCheckFlag = true
          this.settleAccountBalanceDetails = res.data
          this.displayAccountDialog()
        }
      })
    },
    doMonthSettle() {
      finVoucher.doMonthSettle(this.curMonth).then(res => {
        this.$router.go(0)
      })
    },
    doMonthUnsettle() {
      finVoucher.doMonthUnsettle(this.curMonth).then(res => {
        this.$router.go(0)
      })
    }
  }
}
</script>
